<template>
  <el-form-item label="文件" prop="fileList">
    <jqr-upload v-model:files="fileSaveDtoList">
      <template #tip>
        <div class="el-upload__tip">支持扩展名：jpg/png/pdf/doc/docx，文件不能超过10mb</div>
      </template>
      <el-scrollbar class="scrollBox" style="max-height: 200px">
        <div style="max-height: 200px">
          <div class="files" v-for="(item, i) in fileSaveDtoList" :key="i">
            <div class="name">{{ item.name || item.fileName }}</div>
            <el-icon @click="deleteFile(item)"><Close /></el-icon>
          </div>
        </div>
      </el-scrollbar>
    </jqr-upload>
  </el-form-item>
</template>

<script lang="ts" setup>
import openMsgBox from '@/hooks/messageBox.js';
const props = defineProps({
  list: {
    type: Array<any>,
  },
});
const fileSaveDtoList = ref(props.list);
const emits = defineEmits(['update:list']);
watch(
  () => fileSaveDtoList.value,
  (val) => {
    emits('update:list', val);
  },
);
const deleteFile = (item) => {
  openMsgBox(
    {
      tips: `是否确定删除该文件?`,
    },
    () => {
      fileSaveDtoList.value.splice(fileSaveDtoList.value.indexOf(item), 1);
    },
    () => {},
  );
};
</script>

<style lang="scss" scoped>
.files {
  @include flex-space-between;
  border: 1px #ddd solid;
  padding: 0 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  .el-icon {
    cursor: pointer;
  }
}
</style>
